
<template>
  <div class="chart-box" >
    <br>
    <br>
      <div class="block"   align="center">
    <span class="demonstration" >日期选择</span>
    <el-date-picker 
      v-model="value_day"
      type="date"
      placeholder="请选择"
      :picker-options="pickerOptions1"
      @change="(value) => changeTime(value, value_day)">
    </el-date-picker>
  </div>
        <div id = 'satellite_pie' ref = 'myEchart' ></div>
  </div>
</template>
<!--template> 
  <div class="trend-time"  slot="header">
        <el-row>
            <el-col :span="10"> 
          <div class="block">
            <el-date-picker
              v-model="tempArticle.last_time_start"
              type="datetime"
              placeholder="选择日期时间"
              align="right"
              @change="checkTimeStart"
              :picker-options="pickerCalendarOptions1">
            </el-date-picker>
          </div>
        </el-col >
        </el-row>
  </div>
  </template>
<template>
    <div id = 'satellite_pie' ref = 'myEchart' ></div>
</template-->

<script type="text/babel">
  import echarts from 'echarts'
  export default {
        data() {
      return {
            dataList:[
          {value:1402, name:'Navigation Satellites'},
          {value:1658, name:'Communications Satellites'},
          {value:1861, name:'Miscellaneousc Satellites'},
          {value:9290, name:'Scientific Satellites'},
          {value:11577, name:'Specialinterest Satellites'},
          {value:7240, name:'Weather Earthresources Satellites'},
        ],
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value_day: '',
      listQuery: {
      name: '',
      value_day:''
          },
      };
      
    },
    methods: {
        changeTime(value, value_day){
          console.log(this.value_day)
          this.listQuery.value_day=this.value_day
            this.api({
            url: "/listDate/listDate",
            method: "get",
            params: this.listQuery
            }).then(data => {
                // console.log('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx');
                //console.log(data)
                //var json = JSON.parse(data);
                this.dataList[0].value=data["navigation_satellites"]
                this.dataList[1].value=data["communications_satellites"]
                this.dataList[2].value=data["miscellaneousc_satellites"]
                this.dataList[3].value=data["scientific_satellites"]
                this.dataList[4].value=data["specialinterest_satellites"]
                this.dataList[5].value=data["weather_earth_resources_satellites"]
                this.initChart()
            })
          //this.initChart()
          console.log(this.dataList)
        },

      // 图表初始化数据
      initChart(){
        let myChart = echarts.init(this.$refs.myEchart);
        myChart.setOption({
          tooltip: {
            trigger:'item',
            formatter: "{a} <br/>{b}: {c} <br/> ({d}%)"
          },

          series : [
            {
              label: {
                normal: {
                    show: true,
                    formatter: '{b}: {c}({d}%)',
                    textStyle: {
            "fontSize": 16
        }
                }
            },
              name:'TLE数据比例',
              type: 'pie',
              radius : '80%',
              center: ['52%', '55%'],
              avoidLabelOverlap: false,
              data: this.dataList,
              itemStyle: {
                emphasis: {
                  shadowBlur: 6,
                  show:true,
                  shadowOffsetX: 1,
                  shadowColor: 'rgba(0, 0, 0, 0.3)',
                  labelLine :{show:true} 
                }
              }
            }
          ]
        })
      }
    },
    mounted () {
      let obj = this.$refs.myEchart;
      if(obj){
        this.initChart();
      }
    }
  }
</script>

<style lang="scss" type="text/scss" rel="stylesheet/scss" scoped>
  #satellite_pie {
    width: 100%;
    height: 500px;
  }

</style>
